@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.component-group {
  position: relative;
  padding: 10px;
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  user-select: none;
  column-gap: 15px;
  justify-content: flex-start;
  max-width: 100%;
  &.directionCol {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 15px;
    overflow-x: hidden;
    ::ng-deep {
      > .ng-star-inserted,
      .citems {
        max-width: 100%;
      }
    }
  }
  ::ng-deep {
    > .ng-star-inserted {
      animation-duration: 0.5s;
      animation-fill-mode: both;
      animation-name: zoomInDown;
    }
    @for $i from 2 through 20 {
      > .ng-star-inserted:nth-child(#{$i}) {
        animation-delay: $i * 0.05s;
      }
    }
  }
}
